import { defineComponent, ref } from "vue";
import {
  getSize,
  getUserInfoUrl,
  getUserTypeValue,
  isDh,
} from "@/command/apiTool";
import PageTitle from "@/components/PageTitle";
import Banner from "@/components/Banner";
import CardView from "@/components/CardView";
import TitleView from "@/components/TitleView";
import Text from "@/components/Text";
import ButtonGroupView from "@/components/ButtonGroupView";
import { IButtonGroupViewData } from "@/components/ButtonGroupView/types";
import { useRoute } from "vue-router";
import { useRequest } from "./request";
import { Popup } from "vant";
import PopTitle from "@/components/PopTitle";
import PopCheck from "@/components/PopupCheck";
import * as vant from "vant";
import { toChatDetail } from "@/command/navigation";
import ButtonView from "@/components/ButtonView";
const { showFailToast } = vant;
export default defineComponent({
  name: "",
  setup() {
    const route = useRoute();
    const popup = ref(false);
    const { detail, memberList, myTeamInfo } = useRequest();
    const render1 = () => {
      return <Banner url={detail.value.img} class="w-full h-[206px]" />;
    };
    const render2 = () => {
      return (
        <CardView class={["px-0 py-10"]} radius={0}>
          <TitleView title={detail.value.title} class={["mx-12"]} />
          <Text class={["mx-12"]}>主办单位: {detail.value.sponsor}</Text>
          <Text class={["mx-12"]}>时间: {detail.value.showTime}</Text>
          <Text class={["mx-12"]}>地点: {detail.value.address}</Text>
        </CardView>
      );
    };
    const render3 = () => {
      return (
        <CardView class={["px-0 py-10 mt-[10px]"]} radius={0}>
          <TitleView title={"展品范围"} class={["mx-12"]} />
          <Text class={["mx-12"]}>{detail.value.introduce}</Text>
        </CardView>
      );
    };
    const render4 = () => {
      const buttons: IButtonGroupViewData[] = [
        {
          display: isDh(),
          text: "联系小户",
          type: "primary",
          childClass: "!h-[40px] !w-full",
          onClick: () => {
            if (memberList.value.length > 0) {
              popup.value = true;
            } else {
              showFailToast("未结队");
            }
          },
        },
        {
          display: !isDh(),
          text: "咨询大户",
          type: "primary",
          childClass: "!h-[40px] !w-full",
          onClick: () => {
            if (myTeamInfo.value.phone && myTeamInfo.value.name) {
              toChatDetail({
                to: myTeamInfo.value.phone,
                name: myTeamInfo.value.name,
              });
            } else {
              showFailToast("未结队");
            }
          },
        },
      ].filter((e: any) => e.display) as IButtonGroupViewData[];
      return (
        <div
          class="fixed left-0 right-0 bottom-0 h-[61px] flex items-center justify-center bg-white px-[10px] z-50"
          style={{
            boxShadow: "0px -3px 12px 1px rgba(0,0,0,0.1);",
            borderTop: "1px solid #f5f5f5",
          }}
        >
          <ButtonGroupView data={buttons} />
        </div>
      );
    };
    const renderCheckPop = () => {
      const newList = memberList.value.map((e: any) => {
        return {
          ...e,
          right: () => {
            return (
              <ButtonView
                onClick={() => {
                  toChatDetail({
                    to: e.phone,
                    name: e.userName,
                  });
                }}
                class="!h-[22px]"
                style={{
                  height: getSize(22) + "!important",
                  width: getSize(61) + "!important",
                }}
              >
                联系小户
              </ButtonView>
            );
          },
        };
      });
      return (
        <Popup
          v-model:show={popup.value}
          round
          position="bottom"
          class={"!mt-[0px]"}
        >
          <PopTitle title="结队小户" />
          <PopCheck data={newList} />
        </Popup>
      );
    };
    return () => {
      return (
        <PageTitle title="展会详情" childClass="!p-[0px]">
          {render1()}
          {/* 加载富文本 */}
          {render2()}
          {render3()}
          {render4()}
          {isDh() && renderCheckPop()}
        </PageTitle>
      );
    };
  },
});
